<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>收藏列表</title>

    <!--=== logo ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--=== Favicon ===-->
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=1.0" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<jsp:include page="../head.jsp"/>
<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="${pageContext.request.contextPath}/index.do">主页</a></li>
                        <li><a href="${pageContext.request.contextPath}/product/list.do">商品</a></li>
                        <li><a href="${pageContext.request.contextPath}/product/Collect.do" class="active">收藏列表</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<!--== Page Content Wrapper Start ==-->
<div id="">
    <div class="container">
        <div class="row">
            <!-- Start Shop Page Content -->
            <div class="col-lg-10 m-auto">
                <div class="shop-page-content-wrap">
                    <div class="shop-page-products-wrap">
                        <div class="products-wrapper">
                            <div class="row" style="min-height: 600px;">
                                <c:forEach items="${collect}" var="item">
                                    <!-- Single Product Start -->
                                    <div class="col-lg-3">
                                        <div class="single-product-item">
                                            <figure class="product-thumb">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                    <img class="MidHw"
                                                         src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"></a>
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="btn btn-round btn-cart" title="Quick View"><i
                                                        class="fa fa-eye"></i></a>
                                            </figure>
                                            <div class="product-details">
                                                <h2 class="product-title"><a
                                                        href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                                ${fn:substring(item.name,0 ,12 )}...
                                                </a></h2>
                                                <span class="product-price">$${item.shelfPrice}</span>

                                                <div class="product-meta">
                                                    <a href="javascript:void(0);" onclick="updateCollect(this,'${item.pid}')"
                                                       class="btn btn-round  btn-wish">
                                                        <i class="fa fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Product End -->
                                </c:forEach>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- End Shop Page Content -->
        </div>
    </div>
</div>

<!--== Page Content Wrapper End ==-->
<!--== Page Content Wrapper End ==-->
<jsp:include page="../foot.jsp"/>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->


<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<%--Jquery Fly Min Js--%>
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery.fly.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>

<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>

<script>

    function updateCollect(data,pid) {
        var _this = $(data);
       if(confirm("确认取消收藏商品了吗？亲")){
           $.ajax({
               url: "${pageContext.request.contextPath}/product/updateCollect.do",
               type: "post",
               data: {
                   pid:pid
               },
               success: function (d) {
                   if (d.status == 1) {
                       prompt("正在前往登录", 900);
                       setTimeout(
                           function () {
                               window.location.href = "${pageContext.request.contextPath}/gotologin.do";
                           }, (1 * 1000));
                   }
                   if (d.status == 0) {
                       _this.toggleClass("btn-wish");
                       _this.toggleClass("btn-nowish");
                       if (d.data == 0) {
                           prompt("已取消收藏", 100);
                           setTimeout(function () {
                               location.reload();
                           },100)
                       }
                   }
               }
           })
       }

    }

    function prompt(text, _time) {
        var windowWidth = $(window).width();
        var tipsDiv = '<div class="tipsClass">' + text + '</div>';
        $('body').append(tipsDiv);
        $('div.tipsClass').css({
            'top': 130 + 'px',
            'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
            'position': 'fixed',
            'padding': '10px 16px',
            'background': '#7FFFD4',
            'font-size': 18 + 'px',
            'margin': '0 auto',
            'text-align': 'center',
            'width': '350px',
            'height': 'auto',
            'color': 'white',
            'opacity': '0.8'
        }).show();
        setTimeout(function () {
            $('div.tipsClass').fadeOut();
        }, _time);
    }
</script>
</html>
